const path = require('path')
//启用热更新的第二步
const webpack = require('webpack')
const htmlWebpackPlugin = require('html-webpack-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin');




module.exports={
    mode:'development',
    entry:path.join(__dirname,'./src/main.js'),
    output:{
        path:path.join(__dirname,'./dist'),
        filename:'bundle.js'
    },
    devServer:{//这是配置dev-server命令参数的第二种形式，相对来说，这种方式麻烦一些
        // --open --port 3000 --contentBase src --hot
        open:true,//自动打开浏览器
        port:3000,//设置启动时的启动端口
        contentBase:'src',//启动时托管的根目录
        hot:true//启用热更新的第一步
    },

    //webpack‘处理第三方文件类型的过程
    //1、发现文件不是js文件，会去配置文件中查找有没有对应的第三方文件类型
    //2、如果能找到对应规则，则会对应loader进行处理
    //3、调用loader时是从后往前调用
    //4、当webpack拿到匹配规则后，就拿到了配置对象中，指定的入口和出口，然后进行打包构建
    module:{
        rules:[
            {test:/\.css$/,use:['style-loader','css-loader']},
            { test:/\.scss$/,use:['style-loader','css-loader','sass-loader']},
            { test:/\.less$/,use:['style-loader','css-loader','less-loader']},

            //limit给定的值时图片的大小，单位时byte，
            //如果大小小于给定的limit值，则不会转为base64
            //格式的字符串 
            { test:/\.(jpg|png|jepg|gif)$/,use:'url-loader?limit=1'},
            { test:/\.vue$/,use:'vue-loader'},//处理.vue文件的loader       
            { test: /\.(eot|woff|ttf)$/, loader: "file-loader" }
        ]
    },
    plugins:[//配置插件的节点
        new webpack.HotModuleReplacementPlugin(),//new 一个热更新模块对象，这是启用热更新的第三步
        new htmlWebpackPlugin({//创建一个在内存中生成HTML页面的插件
            template:path.join('./src/index.html'),//指定模版页面，将来根据此页面路径生成内存中的html页面
            filename:'index.html'//指定生成的页面名称
        }),
        new VueLoaderPlugin()
    ],
    resolve:{
        alias:{
            // 'vue$':'vue/dist/vue.js'//修改vue被导入时的路径
        }
       
    }
}